fix: Screen Reader: Many Pages: Elements are focused in a confusing order #81063
Conversation
melvin-bot
bot
requested review from
dukenv0307
and removed request for
a team
|
@dukenv0307 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
melvin-bot
bot
requested review from
joekaufmanexpensify
and removed request for
a team
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| const composerStyle = useMemo(() => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}]), [style, textContainsOnlyEmojis, styles]); | ||
|
|
||
| // Negative margin moves frame up for correct iOS VoiceOver order; padding compensates visually. See #77499. | ||
| const composerStyle = useMemo( |
There was a problem hiding this comment.
❌ CONSISTENCY-2 (docs)
The hardcoded values -5 and 5 are magic numbers that reduce code readability and maintainability. These accessibility-related values should be defined as named constants to clearly document their purpose.
Suggested fix:
Define constants at the top of the file or in a constants file:
const VOICEOVER_FRAME_ADJUSTMENT = {
MARGIN_TOP: -5,
PADDING_TOP: 5,
} as const;Then use them in the style:
const composerStyle = useMemo(
() => StyleSheet.flatten([
style,
textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {},
{
marginTop: VOICEOVER_FRAME_ADJUSTMENT.MARGIN_TOP,
paddingTop: VOICEOVER_FRAME_ADJUSTMENT.PADDING_TOP
}
]),
[style, textContainsOnlyEmojis, styles],
);Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 303cd8b587
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| const composerStyle = useMemo( | ||
| () => StyleSheet.flatten([style, textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {}, {marginTop: -5, paddingTop: 5}]), |
There was a problem hiding this comment.
This change adds paddingTop: 5 to the native composer style for all platforms, which overrides the Android workaround that explicitly sets paddingTop: 0 / paddingBottom: 0 to prevent extra vertical padding in multiline TextInput (see src/styles/index.ts lines 2143–2149). On Android, this will reintroduce the extra padding/height and can misalign the composer relative to the send button or change its height. If the fix is meant only for iOS VoiceOver, it should be gated to iOS or otherwise avoid overriding the Android padding reset.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Make sense, can you please confirm this change doesn't cause the regression on Android @TaduJR ?
2 participants
Explanation of Change
iOS VoiceOver determines reading order by element frame Y position (top-to-bottom), not DOM order. In the chat composer, buttons use alignSelf: 'flex-end' which positions them higher (lower Y value) than the text input.
This caused VoiceOver to read the Send button before the text input field, violating WCAG 2.4.3 Focus Order.
This fix applies a negative margin (marginTop: -5) to move the text input's accessible frame up, aligning it with the buttons so VoiceOver reads it first. The padding (paddingTop: 5) compensates visually so there's no visible layout change.
Fixed Issues
$ #77499
PROPOSAL: #77499 (comment)
Tests
Precondition: User is logged in
The text input field should receive focus before the Send button.
Screen reader users should encounter elements in the same order as sighted users.
Other Occurrences:
New Chat
Group Chat
Offline tests
Same as tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari